<template>
    <view class="page">

        <!-- <template #top> -->
        <!-- <view class="top"> -->
        <!-- 搜索 -->
        <view class="search-head">
            <view class="back" @click="onBack">
                <text></text>
            </view>
            <view class="search">
                <uni-search-bar cancelButton="none" bgColor="#80bebb" @confirm="search" :focus="true"
                    v-model="queryParams.key" @blur="blur" @input="input" @cancel="cancel" @clear="clear">
                    <template v-slot:searchIcon>
                        <uni-icons color="#f2f2f2" size="20" type="search" />
                    </template>
                    <template v-slot:clearIcon>
                        <uni-icons color="#989898" size="20" type="close" />
                    </template>
                </uni-search-bar>
                <!-- <text class="iconfont icon-fadajing"></text>
                            <input type="text" v-model="keyword" placeholder="搜索商品" /> -->
            </view>
            <view class="cut" @click="isList = !isList">
                <text class="iconfont" :class="isList ? 'icon-shitu01' : 'icon-shitu02'"></text>
            </view>
        </view>
        <!-- 筛选 -->
        <view class="screen-info">
            <view class="screen-list">
                <view class="list" :class="{'action' : screenShow===0}" @click="onSynthesize(0)">
                    <text>综合</text>
                    <!-- <text class="iconfont icon-sanjiao icon_z"></text> -->
                </view>
                <view class="list" :class="{'action' : screenShow===1}" @click="onSynthesize(1)">
                    <text>销量</text>
                    <text></text>
                </view>
                <view class="list" @click="onSynthesize(up,up)">
                    <text :class="{'action0':screenShow===2 || screenShow===3}">价格</text>
                    <view class="icon_j">
                        <text class="iconfont icon-sanjiao up" :class="{'action1':screenShow===2 }"></text>
                        <text class="iconfont icon-sanjiao down" :class="{'action1':screenShow===3 }"
                            @click="onSynthesize(3)"></text>
                    </view>
                </view>
                <!-- <view class="list" :class="{'action':screenShow===3}" @click="onSynthesize(3)">
                    <text>筛选</text>
                    <text class="iconfont icon-shaixuan icon_s"></text>
                </view> -->
            </view>
            <!-- 筛选弹窗 -->
            <!-- <view class="screen-popup" @click.stop="isScreen = false" v-show="isScreen">
                <view class="synthesize">
                    <view class="list">
                        <text class="check"></text>
                        <text class="title">综合排序</text>
                    </view>
                    <view class="list">
                        <text class="check"></text>
                        <text class="title">评论数从高到低</text>
                    </view>
                </view>
            </view> -->
        </view>

        <!-- </view> -->
        <!-- </template> -->
        <!-- 商品列表 -->
        <z-paging ref="paging" v-model="dataList" @query="getList">
            <view class="goods-data">
                <view class="goods-list">
                    <view :class="isList?'list-view' : 'list-li'" v-for="(item,index) in dataList"
                        @click="onGoodsList(item)" :key="index">
                        <view class="thumb">
                            <image :src="item.cover" mode="widthFix"></image>
                        </view>
                        <view class="item">
                            <view class="title">
                                <text class="one-omit">{{item.name}}</text>
                            </view>
                            <!--  <text class="commodity-disc">{{item.disc}}</text> -->
                            <view class="commodity-detail">
                                <view class="commodity-yuans">
                                    <view class="ret-yuans" v-if="item.price_market">¥{{item.price_market}}</view>
                                    <view class="commodity-price">￥{{item.price_selling}}</view>
                                </view>
                                <text class="commodity-count">已售{{item.stock_virtual}}件</text>
                            </view>
                            <!-- <view class="price">
                                <view class="retail-price">
                                    <text class="min">￥</text>
                                    <text class="max">{{item.price}}</text>
                                    <view class="tag" v-if="item.is_goods === 1">
                                        <text>抢购价</text>
                                    </view>
                                </view>
                                <view class="vip-price">
                                    <text class="min">￥</text>
                                    <text class="max">{{item.vip_price}}</text>
                                </view>
                            </view> -->
                        </view>
                    </view>
                </view>

            </view>
            <!-- 抽屉 -->
            <!-- <view class="cu-modal drawer-modal justify-end" :class="{'show':isDrawer}" @click="isDrawer = false"
                style="position: absolute;">
                <view class="cu-dialog basis-lg" @click.stop="isDrawer = true">
                    <view class="serve">
                        <view class="title">
                            <text>服务</text>
                        </view>
                        <view class="serve-list">
                            <view class="list action">
                                <text>会员专享</text>
                            </view>
                            <view class="list">
                                <text>活动</text>
                            </view>
                            <view class="list">
                                <text>活动</text>
                            </view>
                        </view>
                    </view>
                    <view class="price-screen">
                        <view class="title">
                            <text>价格区间</text>
                        </view>
                        <view class="price-section">
                            <input type="number" placeholder="最低价">
                            <text></text>
                            <input type="number" placeholder="最高价">
                        </view>
                    </view>
                    <view class="operation-btn">
                        <view class="btn" @click.stop="isDrawer = false">
                            <text>取消</text>
                        </view>
                        <view class="btn action">
                            <text>确认</text>
                        </view>
                    </view>
                </view>
            </view> -->
        </z-paging>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import {
        getListsToQuery
    } from '@/api/mall.js'
    export default {
        data() {
            return {
                queryParams: {
                    page: 1,
                    limit: 10,
                    key: '',
                    order: '',
                },
                dataList: [],
                mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
                // 下拉刷新的配置(可选, 绝大部分情况无需配置)
                downOption: {},
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {},
                // 列表视图切换
                isList: true,
                // 筛选弹窗
                // isScreen: false,
                // 筛选切换
                screenShow: 0,
                up: 2,
                // 抽屉
                // isDrawer: false,
                // keyword: '',
                choose: {
                    status: 0
                },
                // goodsList: [],
            }
        },
        onLoad(params) {
            this.queryParams.key = decodeURIComponent(params.keyword || '');
            if (uni.getStorageSync('SearchRecordArr')) {
                this.SearchRecordArr = JSON.parse(uni.getStorageSync('SearchRecordArr'));
            }
        },
        methods: {
            /*下拉刷新的回调, 有三种处理方式:*/
            // downCallback() {
            //     this.mescroll.endSuccess();
            // },
            // /*上拉加载的回调*/
            // upCallback(page) {
            //     setTimeout(() => {
            //         this.mescroll.endByPage(10, 20);
            //     }, 2000)
            // },
            search(res) {
                for (var i = 0; i < this.SearchRecordArr.length; i++) {
                    if (this.SearchRecordArr[i] == this.queryParams.key) {
                        this.SearchRecordArr.splice(i, 1);
                    }
                }
                this.SearchRecordArr.unshift(this.queryParams.key);
                uni.setStorageSync('SearchRecordArr', JSON.stringify(this.SearchRecordArr));
                console.log(this.SearchRecordArr, '搜索数组')
                // uni.showToast({
                //     title: '搜索：' + res.value,
                //     icon: 'none'
                // })
            },
            input(res) {
                // this.keyword = res
                // console.log('----input:', this.keyword)
            },
            clear(res) {
                this.queryParams.key = '';
                this.$refs.paging.reload();
                // uni.showToast({
                //     title: 'clear事件，清除值为：' + res.value,
                //     icon: 'none'
                // })
            },
            blur(res) {
                this.$refs.paging.reload();
                // uni.showToast({
                //     title: 'blur事件，输入值为：' + res.value,
                //     icon: 'none'
                // })
            },
            cancel(res) {
                uni.showToast({
                    title: '点击取消，输入值为：' + res.value,
                    icon: 'none'
                })
            },
            /**
             * 返回点击
             */
            onBack() {
                uni.navigateBack();
            },
            /**
             * 综合点击
             * @param {Number} type
             */
            onSynthesize(type, up) {
                this.screenShow = type;
                if (this.screenShow == 0) {
                    this.queryParams.order = '',
                        this.$refs.paging.reload();
                } else if (this.screenShow == 1) {
                    this.queryParams.order = 1,
                        this.$refs.paging.reload();
                } else if (this.screenShow == 2) {
                    this.queryParams.order = 2,
                        this.$refs.paging.reload();
                    this.choose.status = 1
                    console.log(this.choose.status, 'shengxu')
                    //是的话修改标签的status属性
                    // this.choose.status = this.choose.status === 1 ? 2 : 1
                } else if (this.screenShow == 3) {
                    this.queryParams.order = 3,
                        this.$refs.paging.reload();
                    this.choose.status = 2
                    console.log(this.choose.status, 'jiangxu')
                    // this.isDrawer = true;
                    // this.choose.status = 0
                }
                if (up) {
                    this.up = this.up == 2 ? 3 : 2
                }

            },
            getList(page) {
                this.queryParams.page = page
                getListsToQuery(this.queryParams).then(res => {
                    this.dataList = res.data.lists
                    this.$refs.paging.complete(res.data.lists);
                }).catch(err => {
                    this.$refs.paging.complete(false);
                })
            },
            /**
             * 商品列表点击
             */
            onGoodsList(item) {
                uni.navigateTo({
                    url: '/pagesA/mall/goodsDetails?code=' + encodeURIComponent(item.code) + "&invite=" + uni
                        .getStorageSync(
                            "invite_code") || '',
                    // animationType: 'zoom-fade-out',
                    // animationDuration: 200
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .page {
        //position: absolute;
        //width: 100%;
        //height: 100%;
        //background: #f6f6f6;
        // overflow-x: hidden;
        // overflow-y: auto;
        //padding-bottom: 40rpx;
    }

    /* 搜索 */
    /* 搜索 */

    .search-head {
        position: fixed;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100rpx;
        z-index: 10;
        /* #ifdef APP-PLUS */
        height: calc(150rpx + var(--status-bar-height));
        /* #endif */
        /* #ifdef MP */
        height: calc(300rpx + var(--status-bar-height));
        padding-top: var(--status-bar-height);
        /* #endif */
        background: linear-gradient(to bottom, #2e996d, #4099ad);

        .back {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10%;
            height: 100%;

            text {
                width: 20rpx;
                height: 20rpx;
                border-left: 2rpx solid #fff;
                border-bottom: 2rpx solid #fff;
                transform: rotate(45deg);
            }
        }

        .search {
            /deep/.uni-searchbar {
                padding: 0;
                width: 580rpx;
                height: 60rpx;
                margin-top: 0 auto;
                color: #fff;
            }

            /deep/.uni-searchbar__box {
                height: 60rpx;
            }
        }

        // .search {
        //     display: flex;
        //     align-items: center;
        //     width: 76%;
        //     height: 60rpx;
        //     background-color: #80bebb;
        //     border-radius: 10rpx;
        //     padding: 0 4%;

        //     text {
        //         font-size: 34rpx;
        //         color: #fff;
        //     }

        //     input {
        //         width: 90%;
        //         height: 100%;
        //         font-size: 26rpx;
        //         color: #fff;
        //         margin-left: 10rpx;
        //     }
        // }

        .cut {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 10%;
            height: 100%;

            text {
                font-size: 38rpx;
                color: #fff;
            }
        }
    }

    /* 筛选 */
    .screen-info {
        position: fixed;
        left: 0;
        top: 100rpx;
        z-index: 11;
        /* #ifdef APP-PLUS */
        top: 150rpx;
        /* #endif */
        /* #ifdef MP */
        top: calc(200rpx + var(--status-bar-height));
        /* #endif */
        width: 100%;
        height: 100rpx;
        background-color: #ffffff;

        .screen-list {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;

            .list {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 30%;
                height: 100%;

                text {
                    font-size: 26rpx;
                    color: #555555;
                }

                // .icon_z {
                //     font-size: 24rpx;
                //     transform: rotate(90deg) scale(0.7);
                // }

                .icon_j {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 40rpx;
                    height: 100%;

                    .up {
                        transform: rotate(-90deg) scale(0.7);
                        margin-bottom: -25rpx;
                        //margin-left: 8rpx;
                    }

                    .action1 {
                        color: $base;
                    }

                    .down {
                        transform: rotate(90deg) scale(0.7);
                    }
                }

                .action0 {
                    color: $base;
                }

                // .icon_s {
                //     font-size: 24rpx;
                //     margin-left: 10rpx;
                //     // transform: scale(0.7);
                // }
            }

            .action {
                text {
                    color: $base;
                }
            }
        }

        // 弹出层
        .screen-popup {
            position: fixed;
            left: 0;
            top: 200rpx;
            /* #ifdef APP-PLUS */
            top: 250rpx;
            /* #endif */
            /* #ifdef MP */
            top: 300rpx;
            /* #endif */
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);

            // 综合
            .synthesize {
                padding: 0 20rpx;
                height: 200rpx;
                background-color: #f6f6f6;
                border-radius: 0 0 20rpx 20rpx;

                .list {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 80rpx;

                    .check {
                        display: inline-block;
                        width: 20rpx;
                        height: 10rpx;
                        border-left: 4rpx solid $base;
                        border-bottom: 4rpx solid $base;
                        border-radius: 4rpx;
                        transform: rotate(-45deg);
                    }

                    .title {
                        font-size: 26rpx;
                        color: #555555;
                        margin-left: 20rpx;
                    }
                }
            }
        }
    }

    // }
    /* 商品列表 */

    .goods-data {
        width: 100%;
        margin-top: 220rpx;
        /* #ifdef APP-PLUS */
        margin-top: 270rpx;
        /* #endif */
        /* #ifdef MP */
        margin-top: calc(320rpx + var(--status-bar-height));

        /* #endif */
        .goods-list {
            // padding: 0 25rpx;
            border-radius: 20rpx;
            overflow: hidden;
            padding: 15rpx;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;

            .list-view {
                // float: left;
                width: 45%;
                padding-bottom: 30rpx;
                // height: 560rpx;
                // background-color: #ffffff;
                // border-radius: 20rpx;
                // margin-right: 2%;
                // margin-bottom: 30rpx;
                // overflow: hidden;
                margin: 0 15rpx 30rpx 15rpx;
                border: 1rpx solid #efefef;
                border-radius: 10rpx;

                .thumb {
                    // padding-top: 20rpx;
                    // width: 100%;
                    // height: 62%;
                    // overflow: hidden;
                    width: 100%;
                    //   height: 60%;
                    height: 250rpx;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;

                    image {
                        height: 250rpx;
                    }
                }

                .item {
                    width: 100%;

                    .title {
                        padding: 20rpx;

                        text {
                            width: 100%;
                            color: #212121;
                            font-size: 26rpx;
                        }
                    }

                    .commodity-disc {
                        border-radius: 4rpx;
                        background: #efefef;
                        padding: 5rpx 20rpx;
                        font-size: 24rpx;
                        color: #7f8699;
                        text-align: left;
                        margin-left: 15rpx;
                        // margin-top: 9rpx;
                    }

                    .commodity-detail {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-left: 15rpx;
                        width: 300rpx;

                        // margin-top: 18rpx;
                        .ret-yuans {
                            color: #a6a8ae;
                            font-size: 28rpx;
                            margin-left: 8rpx;
                            text-decoration: line-through;
                        }

                        .commodity-price {
                            color: #ff0000;
                            font-size: 28rpx;
                        }

                        .commodity-count {
                            color: #999999;
                            font-size: 26rpx;
                        }
                    }

                    // .price {
                    //     padding: 0 20rpx;
                    //     .retail-price {
                    //         display: flex;
                    //         align-items: flex-end;
                    //         width: 100%;
                    //         height: 40rpx;
                    //         .min {
                    //             display: inline-block;
                    //             font-size: 24rpx;
                    //             color: $base;
                    //             font-weight: bold;
                    //             transform: scale(0.7);
                    //         }
                    //         .max {
                    //             font-size: 28rpx;
                    //             color: $base;
                    //             font-weight: bold;
                    //         }
                    //         .tag {
                    //             position: relative;
                    //             background-color: $base;
                    //             border-radius: 4rpx;
                    //             margin-left: 10rpx;
                    //             text {
                    //                 display: inline-block;
                    //                 color: #ffffff;
                    //                 font-size: 24rpx;
                    //                 transform: scale(0.7);
                    //             }
                    //         }
                    //         .tag:before {
                    //             position: absolute;
                    //             left: -6rpx;
                    //             top: 0;
                    //             content: "";
                    //             width: 0;
                    //             height: 0;
                    //             border-top: 0rpx solid transparent;
                    //             border-right: 10rpx solid $base;
                    //             border-bottom: 6rpx solid transparent;
                    //         }
                    //     }
                    //     .vip-price {
                    //         display: flex;
                    //         align-items: flex-end;
                    //         width: 100%;
                    //         height: 40rpx;
                    //         .min {
                    //             display: inline-block;
                    //             font-size: 24rpx;
                    //             color: #212121;
                    //         }
                    //         .max {
                    //             font-size: 24rpx;
                    //             color: #212121;
                    //         }
                    //     }
                    // }
                }
            }

            .list-view:nth-child(2n) {
                margin-right: 0;
            }

            // 列表
            .list-li {
                display: flex;
                align-items: center;
                width: 100%;
                height: 200rpx;
                background-color: #ffffff;
                border-bottom: 2rpx solid #f6f6f6;

                .thumb {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30%;
                    height: 100%;

                    image {
                        width: 200rpx;
                        height: 200rpx;
                        border-radius: 10rpx;
                    }
                }

                .item {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    width: 70%;
                    height: 100%;

                    .title {
                        padding: 0 20rpx 20rpx 20rpx;

                        text {
                            width: 100%;
                            color: #212121;
                            font-size: 26rpx;
                        }
                    }

                    .commodity-disc {
                        border-radius: 4rpx;
                        background: #efefef;
                        padding: 5rpx 20rpx;
                        font-size: 24rpx;
                        color: #7f8699;
                        text-align: left;
                        margin-left: 15rpx;
                        margin-top: 9rpx;
                        max-width: 50%;
                    }

                    .commodity-detail {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-left: 15rpx;
                        width: 90%;
                        margin-top: 18rpx;

                        .commodity-yuans {
                            display: flex;
                            align-items: center;

                            .ret-yuans {
                                color: #a6a8ae;
                                font-size: 28rpx;
                                margin-left: 13rpx;
                                text-decoration: line-through;
                            }

                            .commodity-price {
                                color: #ff0000;
                                font-size: 28rpx;
                            }

                        }


                        .commodity-count {
                            color: #999999;
                            font-size: 26rpx;
                        }
                    }

                    .price {
                        padding: 0 20rpx;

                        .retail-price {
                            display: flex;
                            align-items: flex-end;
                            width: 100%;
                            height: 40rpx;

                            .min {
                                display: inline-block;
                                font-size: 24rpx;
                                color: $base;
                                font-weight: bold;
                                transform: scale(0.7);
                            }

                            .max {
                                font-size: 28rpx;
                                color: $base;
                                font-weight: bold;
                            }

                            .tag {
                                position: relative;
                                background-color: $base;
                                border-radius: 4rpx;
                                margin-left: 10rpx;

                                text {
                                    display: inline-block;
                                    color: #ffffff;
                                    font-size: 24rpx;
                                    transform: scale(0.7);
                                }
                            }

                            .tag:before {
                                position: absolute;
                                left: -6rpx;
                                top: 0;
                                content: "";
                                width: 0;
                                height: 0;
                                border-top: 0rpx solid transparent;
                                border-right: 10rpx solid $base;
                                border-bottom: 6rpx solid transparent;
                            }
                        }

                        .vip-price {
                            display: flex;
                            align-items: flex-end;
                            width: 100%;
                            height: 40rpx;

                            .min {
                                display: inline-block;
                                font-size: 24rpx;
                                color: #212121;
                            }

                            .max {
                                font-size: 24rpx;
                                color: #212121;
                            }
                        }
                    }
                }
            }
        }
    }

    .basis-lg {
        padding-top: 0;
        border-radius: 20rpx 0 0 20rpx;
        flex-basis: 80% !important;

        .serve {
            /* #ifdef APP-PLUS */
            padding-top: 50rpx;
            /* #endif */
            /* #ifdef MP */
            padding-top: 140rpx;
            /* #endif */
            padding-left: 20rpx;
            padding-right: 20rpx;
            background-color: #ffffff;

            .title {
                display: flex;
                align-items: center;
                width: 100%;
                height: 80rpx;

                text {
                    color: #212121;
                    font-size: 28rpx;
                }
            }

            .serve-list {
                display: flex;
                flex-wrap: wrap;
                padding: 20rpx 0;

                .list {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30%;
                    height: 60rpx;
                    border-radius: 60rpx;
                    margin-right: 4%;
                    background-color: #f6f6f6;

                    text {
                        color: #555555;
                        font-size: 24rpx;
                    }
                }

                .list:nth-child(3n) {
                    margin-right: 0;
                }

                .action {
                    background-color: $rgba-03;
                    border: 2rpx solid $base;

                    text {
                        color: $base;
                    }
                }
            }
        }

        .price-screen {
            padding: 0 4%;
            background-color: #ffffff;
            margin-top: 20rpx;

            .title {
                display: flex;
                align-items: center;
                width: 100%;
                height: 80rpx;

                text {
                    color: #212121;
                    font-size: 28rpx;
                }
            }

            .price-section {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 80rpx;

                input {
                    width: 180rpx;
                    height: 50rpx;
                    border-radius: 50rpx;
                    font-size: 24rpx;
                    color: #555555;
                    background-color: #f6f6f6;
                }

                text {
                    display: flex;
                    width: 60rpx;
                    height: 2rpx;
                    background-color: #f6f6f6;
                    margin: 0 20rpx;
                }
            }
        }

        .operation-btn {
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 4%;
            width: 100%;
            height: 100rpx;
            background-color: #ffffff;

            .btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 46%;
                height: 70rpx;
                background-color: #ffffff;
                border: 2rpx solid #f6f6f6;
                border-radius: 70rpx;

                // margin-left: 5%;
                text {
                    color: #212121;
                    font-size: 26rpx;
                }
            }

            .action {
                background-color: $base;

                text {
                    color: #ffffff;
                }
            }
        }
    }
</style>